@charset "UTF-8";
.background {
  background-color: #AECFE9;
  position: absolute;
  width: 100%;
  height: 100%;
}

.background img {
  position: absolute;
  display: block;
  -webkit-animation-name: move-to-right;
          animation-name: move-to-right;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.background .c1 {
  width: 4.288rem;
  height: 3.008rem;
  top: 2.56rem;
  left: -4.26667rem;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}

.background .c2 {
  width: 4.16rem;
  height: 2.944rem;
  top: 2.13333rem;
  left: -4.26667rem;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  -webkit-animation-delay: -18s;
          animation-delay: -18s;
}

.background .c3 {
  width: 6.592rem;
  height: 3.904rem;
  top: 0rem;
  left: -6.61333rem;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  -webkit-animation-delay: -10s;
          animation-delay: -10s;
}

.page-1 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
  opacity: 1;
}

.page-1 .moo {
  width: 13.90933rem;
  height: 5.29067rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 17.49333rem;
  -webkit-transition-delay: 1000ms;
          transition-delay: 1000ms;
}

.page-1 .text {
  width: 9.664rem;
  height: 1.472rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 16.21333rem;
  -webkit-transition-delay: 800ms;
          transition-delay: 800ms;
}

.page-1 .pan {
  z-index: 1;
  width: 11.22133rem;
  height: 14.272rem;
  bottom: 1.70667rem;
  right: 0.21333rem;
  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;
}

.page-1 .bg {
  width: 16rem;
  height: 9.04533rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-1.hide .moo {
  opacity: 0;
  bottom: 32rem;
}

.page-1.hide .text {
  opacity: 0;
  bottom: 32rem;
}

.page-1.hide .pan {
  opacity: 0;
  bottom: 32rem;
}

.page-1.hide .bg {
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}

.page-2 img {
  position: absolute;
  display: block;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

.page-2 .ani {
  width: 12.84267rem;
  height: 7.70133rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 13.44rem;
  -webkit-transition-delay: 900ms;
          transition-delay: 900ms;
  z-index: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation-name: animation-rotate;
          animation-name: animation-rotate;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.page-2 .text {
  width: 13.80267rem;
  height: 9.89867rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 5.97333rem;
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}

.page-2 .text-content {
  width: 10.368rem;
  height: 6.4rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 8.10667rem;
  -webkit-transition-delay: 1400ms;
          transition-delay: 1400ms;
}

.page-2 .user {
  z-index: 1;
  width: 4.30933rem;
  height: 5.41867rem;
  bottom: 0.85333rem;
  left: 1.49333rem;
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.page-2 .bg {
  width: 16rem;
  height: 5.97333rem;
  bottom: 0rem;
  right: 0rem;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.page-2.hide .ani {
  bottom: 17.06667rem;
  left: 16rem;
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
}

.page-2.hide .text {
  bottom: 4.26667rem;
  opacity: 0;
}

.page-2.hide .text-content {
  bottom: 7.68rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-2.hide .user {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0;
}

.page-2.hide .bg {
  bottom: -5.97333rem;
  opacity: 0;
}

@-webkit-keyframes move-to-right {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(23.46667rem, 0, 0);
            transform: translate3d(23.46667rem, 0, 0);
  }
}

@keyframes move-to-right {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(23.46667rem, 0, 0);
            transform: translate3d(23.46667rem, 0, 0);
  }
}

@-webkit-keyframes animation-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes animation-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

body, html {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  height: 100%;
}

.music {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8%;
  display: none;
  z-index: 100;
}

#model-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("/page-2/src/img/loading.jpg");
  background-size: 100% 100%;
  z-index: 5;
}

.load-ok #model-loading {
  -webkit-animation-name: loading-hide;
          animation-name: loading-hide;
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  pointer-events: none;
}

#model-loading .fo {
  width: 100%;
  color: #fff;
  font-size: 0.7em;
  margin-top: 60%;
  text-align: center;
}

#model-loading .mmm {
  margin-top: 10%;
  position: relative;
}

#model-loading .white {
  background: #fff;
  width: 60%;
  margin-left: 20%;
  border-radius: 5px;
  height: 10px;
  position: relative;
}

#model-loading .bule {
  background: #2086b7;
  width: 0%;
  margin-left: 20%;
  border-radius: 5px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: width .1s linear;
  transition: width .1s linear;
}

#index-end {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
}

#index-end.show {
  opacity: 1;
  pointer-events: auto;
}

#index-end .name1 {
  width: 50%;
  margin-top: 25%;
  margin-left: 25%;
}

#index-end .qr-code1 {
  width: 44%;
  margin-top: 10%;
  margin-left: 28%;
}

#index-end .qr-code2 {
  width: 54%;
  margin-top: 10%;
  margin-left: 23%;
}

#main-page {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  z-index: 3;
}

#main-page .page {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
}

#main-page .page.hide {
  opacity: 0;
  pointer-events: none;
}

#main-page .page.show {
  opacity: 1;
  pointer-events: auto;
}

[js-hide] {
  opacity: 0 !important;
}

[js-big-class] {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}

[js-animate-class] {
  -webkit-animation-name: pop-animate;
          animation-name: pop-animate;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

/* loading 隐藏 */
@-webkit-keyframes loading-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes index-wave {
  0% {
    background-position-x: 0rem;
  }
  100% {
    background-position-x: -24.74667rem;
  }
}

@keyframes index-wave {
  0% {
    background-position-x: 0rem;
  }
  100% {
    background-position-x: -24.74667rem;
  }
}

@-webkit-keyframes index-wave-2 {
  0% {
    background-position-x: 0rem;
  }
  100% {
    background-position-x: 24.74667rem;
  }
}

@keyframes index-wave-2 {
  0% {
    background-position-x: 0rem;
  }
  100% {
    background-position-x: 24.74667rem;
  }
}

@-webkit-keyframes item-1 {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: .4rem;
  }
  100% {
    margin-top: 0;
  }
}

@keyframes item-1 {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: .4rem;
  }
  100% {
    margin-top: 0;
  }
}

@-webkit-keyframes item-2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes item-2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes item-3 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  70% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes item-3 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  70% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes pop-animate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(-6deg) scale(1.2);
            transform: rotate(-6deg) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
}

@keyframes pop-animate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(-6deg) scale(1.2);
            transform: rotate(-6deg) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
}
